<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradientiser</title>

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="../assets/css/gradientBackgroundGen.css" />
  </head>
  <body id="gradient">
    <h1>Gradientiser</h1>
    <h2>CSS Gradient Background Generator</h2>
    <p>
      Choose the colors you want by cliking on the color picker tool, or to get
      random color click the button or reload the page. Copy the code and paste
      it in your CSS under body tag or any div tag.
    </p>
    <h3 class="lable">color 1:</h3>
    <input type="color" name="color1" value="#ff0000" id="c1" />
    <h3 class="lable">color 2:</h3>
    <input type="color" name="color2" value="#ffff00" id="c2" />

    <h3>or</h3>

    <button id="random">click to get a random bg</button>
    <h2>CSS code for curent background 👇</h2>
    <h3 id="code"></h3>
    <footer>
      Created for learning and for the use of community. Created by
      <a href="https://twitter.com/NirbhayNP14">Nirbhay Parmar.</a><br />To
      contribute to this project visit
      <a href="https://github.com/Nirbhayparmar/gradientiser-BgGenerator/">
        this repo.</a
      >
    </footer>
    <script
      type="text/javascript"
      src="../assets/js/gradientBackgroundGen.js"
    ></script>
  </body>
</html>
